<script lang="ts">
  import { base } from "$app/paths";
  import { root_menus$ } from "@store/menu";
  import { isSigned$, user$ } from "@store/entity/User";
  import Avatar from "@routes/Avatar.svelte"
</script>

<ul class="flex flex-row justify-between items-center space-x-4">
  {#each $root_menus$ as { name, path, actived } (path)}
    <!-- svelte-ignore a11y-missing-attribute -->
    <li class:actived><a href={path}>{name}</a></li>
  {/each}
  {#if $isSigned$ }
    <li><Avatar user={$user$} /></li>
    <li></li>
  {:else}
    <li><a href="/signin" >登录</a></li>
  {/if}
  
</ul>

<style lang="postcss">
  .actived {
    @apply border-b border-gray-400;
  }
</style>
